<template>
  <view class="vehicle-manage-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">车辆管理</text>
    </view>
    
    <!-- 车辆列表 -->
    <view class="vehicle-list" v-if="myCarList.length > 0">
      <view class="vehicle-card" v-for="(vehicle, index) in myCarList" :key="vehicle.id">
        <view class="vehicle-info">
          <text class="vehicle-plate">{{ vehicle.carNumber }}</text>
          <view class="default-option">
            <radio 
              :checked="vehicle.isDefault" 
              @tap="setDefaultVehicle(index)"
              color="#ff6b35"
            />
            <text class="default-text">默认</text>
          </view>
        </view>
        <view class="vehicle-actions">
          <view class="action-btn delete-btn" @click="deleteVehicle(vehicle, index)">
            <text>删除</text>
          </view>
          <view class="action-btn edit-btn" @click="editVehicle(vehicle)">
            <text>修改</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <view class="empty-icon">🚗</view>
      <text class="empty-text">暂无车辆信息</text>
      <view class="add-vehicle-btn" @click="goAddVehicle">
        <text>添加车辆</text>
      </view>
    </view>
    
    <!-- 底部添加按钮 -->
    <view class="bottom-add-btn" v-if="myCarList.length > 0" @click="goAddVehicle">
      <text>+ 添加车辆</text>
    </view>
  </view>
</template>

<script>
import { getMyCarList, deleteMyNewCar } from '@/api/charging/index.js'

export default {
  data() {
    return {
      myCarList: [], // 车辆列表
      isLoading: false // 加载状态
    }
  },
  onLoad() {
    this.getVehicleList()
  },
  onShow() {
    // 每次显示页面时刷新车辆列表
    this.getVehicleList()
  },
  methods: {
    // 获取车辆列表
    getVehicleList() {
      this.isLoading = true
      getMyCarList().then(response => {
        console.log('获取车辆列表响应:', response)
        if (response.code === 0 && response.success) {
          this.myCarList = response.data.records || []
          // 如果没有默认车辆，设置第一辆为默认
          if (this.myCarList.length > 0 && !this.myCarList.some(v => v.isDefault)) {
            this.myCarList[0].isDefault = true
          }
        } else {
          uni.showToast({
            title: response.msg || '获取车辆列表失败',
            icon: 'none'
          })
        }
      }).catch(error => {
        console.error('获取车辆列表接口调用失败:', error)
        uni.showToast({
          title: error.msg || '网络请求失败',
          icon: 'none'
        })
      }).finally(() => {
        this.isLoading = false
      })
    },
    
    // 设置默认车辆
    setDefaultVehicle(index) {
      // 先取消所有车辆的默认状态
      this.myCarList.forEach((vehicle, i) => {
        vehicle.isDefault = i === index
      })
      
      // 这里可以调用接口保存默认车辆设置
      console.log('设置默认车辆:', this.myCarList[index].carNumber)
      uni.showToast({
        title: '已设为默认车辆',
        icon: 'success'
      })
    },
    
    // 删除车辆
    deleteVehicle(vehicle, index) {
      uni.showModal({
        title: '确认删除',
        content: `确定要删除车牌号为 ${vehicle.carNumber} 的车辆吗？`,
        success: (res) => {
          if (res.confirm) {
            deleteMyNewCar({ carNumber: vehicle.carNumber }).then(response => {
              if (response && response.success) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                })
                // 从列表中移除
                this.myCarList.splice(index, 1)
                // 如果删除的是默认车辆，重新设置默认车辆
                if (vehicle.isDefault && this.myCarList.length > 0) {
                  this.myCarList[0].isDefault = true
                }
              } else {
                uni.showToast({
                  title: response.msg || '删除失败',
                  icon: 'none'
                })
              }
            }).catch(error => {
              uni.showToast({
                title: (error && error.msg) || '网络错误',
                icon: 'none'
              })
            })
          }
        }
      })
    },
    
    // 修改车辆
    editVehicle(vehicle) {
      const carData = encodeURIComponent(JSON.stringify(vehicle))
      uni.navigateTo({
        url: `/pages/addVehicles/index?carData=${carData}`
      })
    },
    
    // 添加车辆
    goAddVehicle() {
      uni.navigateTo({
        url: '/pages/addVehicles/index'
      })
    }
  }
}
</script>

<style scoped>
.vehicle-manage-page {
  background: #fbfbfb;
  min-height: 100vh;
  padding: 20rpx;
}

.page-header {
  text-align: center;
  padding: 20rpx 0 40rpx 0;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.vehicle-list {
  margin-bottom: 120rpx;
}

.vehicle-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.vehicle-info {
  margin-bottom: 24rpx;
}

.vehicle-plate {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}

.default-option {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.default-text {
  font-size: 28rpx;
  color: #666;
}

.vehicle-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  text-align: center;
  padding: 20rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.delete-btn {
  background: #f5f5f5;
  color: #ff6b35;
  border: 2rpx solid #ff6b35;
}

.edit-btn {
  background: #ff6b35;
  color: #fff;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 32rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 48rpx;
}

.add-vehicle-btn {
  background: #ff6b35;
  color: #fff;
  padding: 24rpx 48rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.bottom-add-btn {
  position: fixed;
  bottom: 40rpx;
  left: 40rpx;
  right: 40rpx;
  background: #ff6b35;
  color: #fff;
  text-align: center;
  padding: 24rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
  box-shadow: 0 4rpx 16rpx rgba(255, 107, 53, 0.3);
}
</style> 